<!DOCTYPE html>
<html>
	<head>
	    <meta charset="utf-8">
	    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
	    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
	    <title>Hello APP</title>
	    <link rel="stylesheet" type="text/css" href="../../../css/index.css" />
	</head>
	<style type="text/css">
		.warp{width: 100%;}

		/*类型切换*/
		.sel-type{position: fixed;width: 100%;height: 46px;background: #FFFFFF;z-index: 999;}
		.sel-type .type-one{height: 100%;text-align: center;line-height: 46px;font-size: 15px;color: #BDBDBD;}
		.sel-type .type-one.on{color: #333333;position: relative;}
		.sel-type .type-one.on:after{display: block;content:"";width: 16px;height: 3px;background: #FF9502;position: absolute;bottom: 0;left: 50%;margin-left: -8px;}
		.fenge{width: 100%;height: 46px;background: #F6F6F6;}

		/*订单列表*/
		.order-list{width: 100%;margin-top: 10px;}
		.order-list .order-one{width: 100%;background: #FFFFFF;margin-top: 10px;}
		.order-list .order-one .order-top{height: 50px;width: 100%;align-items: center;padding: 0 15px;box-sizing: border-box;}
		.order-list .order-one .order-top .sta{color:#FF9502;}
		.order-list .order-one .order-conter{width: 100%;}
		.order-list .order-one .order-conter .order-shop{padding: 10px 15px;box-sizing: border-box;background: #FFFFFF;}
		.order-list .order-one .order-conter .order-shop .img-box{width: 92px;height: 92px;overflow: hidden;}
		.order-list .order-one .order-conter .order-shop .img-box img{width: 100%;display:block;}
		.order-list .order-one .order-conter .order-shop .shop-info{padding-left: 12px;box-sizing: border-box;position: relative;}
		.order-list .order-one .order-conter .order-shop .shop-info .name{font-size: 14px;color: #333333;line-height: 18px;}
		.order-list .order-one .order-conter .order-shop .shop-info .guige-box{align-items: center;color:#8E9194;font-size: 12px;padding-top: 16px;box-sizing: border-box;line-height:14px;}
		.order-list .order-one .order-conter .order-shop .shop-info .guige-box .num{color: #333333;}
		.order-list .order-one .order-conter .order-shop .shop-info .price{width: 100%;align-items:center;padding-top: 20px;box-sizing: border-box;}
		.order-list .order-one .order-conter .order-shop .shop-info .price .p1{font-size: 18px;color: #FF9502;font-weight:bold;box-sizing: border-box;line-height: 20px;}
		.order-list .order-one .order-conter .order-shop .shop-info .price .p3{font-size: 18px;color: #FF9502;font-weight:bold;line-height: 20px;}
		.order-list .order-one .order-conter .order-shop .shop-info .price .p3 .t{font-size: 16px;line-height: 20px;}

		.order-list .order-one .order-conter .order-shop .shop-info .price .order-sta{font-size: 12px;color: #666666;text-align: right;}
		.order-list .order-one .order-heji{height: 54px;align-items: center;padding: 0 15px;box-sizing: border-box;justify-content: flex-end;}
		.order-list .order-one .order-heji .t1{font-size: 12px;color: #333333;}
		.order-list .order-one .order-heji .t2{font-size: 16px;color: #333333;font-weight: bold;}

		.order-list .order-one .order-bot{width: 100%;}
		.order-list .order-one .order-bot .btn-box{height: 100%;align-items: center;justify-content: flex-end;padding: 0 15px;box-sizing: border-box;height: 54px;}
		.order-list .order-one .order-bot .btn-box .btn{width:98px;height:34px;box-sizing: border-box;margin-left: 10px;border-radius:4px;background: #FF9502;text-align: center;line-height: 34px;color: #FFFFFF;}
		.order-list .order-one .order-bot .btn-box .btn.c{background: #FF9502;}
		.order-list .order-one .order-bot .btn-box .btn.s{background: #ffffff;color: #999999;}
		.order-list .order-one .order-bot .btn-box .btn.s:before{border: 1px solid #CCCCCC;border-radius: 8px;}

		.beizhu{width: 100%;padding: 0 15px;box-sizing: border-box;}
		.beizhu .bt{font-size: 14px;color: #666666;font-weight: bold;}
		.beizhu .bcont{font-size: 14px;color: #666666;line-height: 20px;padding: 4px 0 10px 0;box-sizing: border-box;}

	</style>
	<body>
		<div id="vue" class="warp">

			<!--类型切换-->
			<div class="sel-type flex">
				<div class="type-one flex1 on" data-sta="0" tapdome onclick="tab_type(this);">全部订单</div>
				<div class="type-one flex1" data-sta="1" tapdome onclick="tab_type(this);">待付款</div>
				<div class="type-one flex1" data-sta="2" tapdome onclick="tab_type(this);">待发货</div>
				<div class="type-one flex1" data-sta="3" tapdome onclick="tab_type(this);">待收货</div>
				<div class="type-one flex1" data-sta="4" tapdome onclick="tab_type(this);">已完成</div>
			</div>
			<div class="fenge"></div>

			<!--订单列表-->
			<div class="order-list" style="display:none;" :style="{ display:(Pdata ? '':'none')}">
				<div class="order-one"  v-for="(item,key) in Pdata.listData">
					<div class="order-top flex">
						<div class="number flex1">订单编号:<i v-text="item.orderid"></i></div>
						<div class="sta" v-text="item.status_str"></div>
					</div>
					<div class="order-conter" :data-id="item.orderid" :data-sta="item.status" tapmode onclick="orderShow(this)" v-for="(i,k) in item.buydata">
						<div class="order-shop flex border-top">
							<div class="img-box border-all">
								<img :src="i.image"/>
							</div>
							<div class="shop-info flex1">
								<div class="name han_1" v-text="i.title"></div>
								<div class="guige-box flex">
									<div class="guige flex1 han_1" v-if="i.ggstr != null" v-text="i.ggstr"></div>
									<div class="guige flex1 han_1" v-if="i.ggstr == null" ></div>
									<div class="num">x<i v-text="i.buynum"></i></div>
								</div>
								<div class="price flex">
									<div class="p1" v-text="'¥'+i.price"></div>
									<div class="p3" v-if="i.unscore">+<i v-text="i.unscore"></i><i class="t">积分</i></div>
								</div>
							</div>
						</div>
					</div>
					<div class="order-bot flex" :style="{ display:(item.status == 1 ? '':'none')}">
						<div class="order-heji flex border-top">
							<div class="t1 han_1">需付款:</div><div class="t2">￥<i v-text="item.pay_price"></i></div>
						</div>
						<div class="flex1 border-top"></div>
					</div>
					<div class="order-bot flex" :style="{ display:(item.status > 1 ? '':'none')}">
						<div class="flex1 border-top"></div>
						<div class="order-heji flex border-top">
							<div class="t1 han_1">实付款:</div><div class="t2">￥<i v-text="item.pay_price"></i></div>
						</div>
					</div>
					<div class="beizhu" v-if="item.status == 1 && item.beizhu_admin != null">
						<div class="bt">管理备注:</div>
						<div class="bcont" v-text="item.beizhu_admin"></div>
					</div>
				</div>
			</div>

			<!--占位图-->
			<div class="nodata" style="display:none;" :style="{ display:(noData ? '':'none')}">
				<img src="../../../image/no_page/no_order.png" />
				<p>暂无订单</p>
			</div>

			<!-- 底部 -->
			<div class="bottom-box" :style="{ display:(loadingMsg ? '':'none')}">
				<div class="msgbox" v-html="loadingMsg" style="color:#999;"></div>
			</div>

		</div>
	</body>
</html>
<script type="text/javascript" src="../../../script/base.min.js" id="loadjs" data-js="L/swiper.min,L/h-tool"></script>
<script type="text/javascript">

	define(function (require, exports, module) {

		if(!pageParam) pageParam = {sta:0};
		$('.sel-type .type-one').eq(pageParam.sta).addClass('on').siblings().removeClass('on');

		var otype = lanYun.getStorage('orderType') || 'order';
		_page.getData = function(loading) {
			lanYun.getVueData({url:'company/Order/index',get:{page:lanYun.page,status:pageParam.sta,otype:otype},cache:0,loading:loading},function(ret) {
				//console.log(JSON.stringify(ret));
			});
		};

		lanYun.newVue('#vue',function() {
			_page.getData(2);
		});

		//滚动加载..
		new auiScroll({distance:200, listen:true},function(ret) {
			if($(window).scrollTop() < 2) ret.isToBottom = false;
			var d = ret.scrollTop / 208;
			if(!ret.isToBottom) return;
			_page.getData(0);
		});

		//切换头部类型
		tab_type = function (tis) {
	        var dst = tis.dataset;
			if($(tis).hasClass('on')){return;}
			$(tis).addClass('on').siblings().removeClass('on');
			pageParam.sta = dst.sta;lanYun.ajaxPageSta = 0; lanYun.page = 1;
			_page.getData(2);
	    }

		onShow = function () {
			var reshpage = lanYun.getStorage('reshpage');
			if(reshpage){
				lanYun.rmStorage('reshpage');
				intGetData();
			}
		}

		topMenuClick = function (){
			lanYun.openFrame('dialog/orderType.html',{ani:0} ,function(data) {
				otype = data.type;
				intGetData();
				//console.log(JSON.stringify(data));
			});
		}

		//打开订单详情
		orderShow = function (tis) {
	        var dst = tis.dataset;
	        lanYun.openWin('main3/company/ordert_show.html', {
				title:"订单详情",
				border:'1',
	        	frameParam : {id:dst.id},
	        });
	    }

		//刷新列表
		intGetData = function () {
			lanYun.ajaxPageSta = 0; lanYun.page = 1;
			_page.getData(2);
		}

	});

</script>
